<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动抽奖</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E63946', // 主色调：喜庆红色
                        secondary: '#FFB703', // 辅助色：金色
                        accent: '#1D3557', // 强调色：深蓝
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-0;
            }
            .prize-item {
                position: absolute;
                width: 50%;
                height: 50%;
                transform-origin: bottom right;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .prize-content {
                position: absolute;
                width: 60%;
                text-align: center;
                transform-origin: center;
                font-weight: bold;
                padding: 0.5rem;
            }
            .pointer {
                clip-path: polygon(50% 0%, 35% 100%, 65% 100%);
                z-index: 10;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-red-50 to-orange-50 min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 页面标题 -->
        <header class="text-center mb-8">
            <div class="inline-block bg-primary text-white px-6 py-1 rounded-full mb-4 shadow-md">
                <span class="text-sm font-medium">幸运大抽奖</span>
            </div>
            <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-accent mb-2 text-shadow">
                <i class="fa fa-gift text-primary mr-2"></i>惊喜好礼等你拿
            </h1>
            <p class="text-gray-600 max-w-lg mx-auto">
                点击开始按钮参与抽奖，祝您好运连连，大奖抱回家！
            </p>
        </header>
        
        <!-- 抽奖区域 -->
        <section class="flex flex-col items-center mb-12">
            <!-- 抽奖转盘容器 -->
            <div class="relative w-full max-w-md aspect-square mb-8">
                <!-- 转盘背景 -->
                <div class="absolute inset-0 rounded-full border-8 border-white shadow-xl overflow-hidden">
                    <!-- 奖品区域 - 8个扇形区域 -->
                    <div class="prize-item bg-red-100" style="transform: rotate(0deg);">
                        <div class="prize-content text-primary" style="transform: rotate(22.5deg) translateY(-40%);">
                            一等奖
                        </div>
                    </div>
                    <div class="prize-item bg-yellow-100" style="transform: rotate(45deg);">
                        <div class="prize-content text-yellow-700" style="transform: rotate(67.5deg) translateY(-40%);">
                            谢谢参与
                        </div>
                    </div>
                    <div class="prize-item bg-green-100" style="transform: rotate(90deg);">
                        <div class="prize-content text-green-700" style="transform: rotate(112.5deg) translateY(-40%);">
                            三等奖
                        </div>
                    </div>
                    <div class="prize-item bg-blue-100" style="transform: rotate(135deg);">
                        <div class="prize-content text-blue-700" style="transform: rotate(157.5deg) translateY(-40%);">
                            二等奖
                        </div>
                    </div>
                    <div class="prize-item bg-purple-100" style="transform: rotate(180deg);">
                        <div class="prize-content text-purple-700" style="transform: rotate(202.5deg) translateY(-40%);">
                            谢谢参与
                        </div>
                    </div>
                    <div class="prize-item bg-pink-100" style="transform: rotate(225deg);">
                        <div class="prize-content text-pink-700" style="transform: rotate(247.5deg) translateY(-40%);">
                            四等奖
                        </div>
                    </div>
                    <div class="prize-item bg-indigo-100" style="transform: rotate(270deg);">
                        <div class="prize-content text-indigo-700" style="transform: rotate(292.5deg) translateY(-40%);">
                            谢谢参与
                        </div>
                    </div>
                    <div class="prize-item bg-orange-100" style="transform: rotate(315deg);">
                        <div class="prize-content text-orange-700" style="transform: rotate(337.5deg) translateY(-40%);">
                            五等奖
                        </div>
                    </div>
                    
                    <!-- 中心圆 -->
                    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-white shadow-md z-5"></div>
                </div>
                
                <!-- 指针 -->
                <div class="pointer absolute top-0 left-1/2 transform -translate-x-1/2 w-10 h-16 bg-secondary"></div>
            </div>
            
            <!-- 抽奖按钮 -->
            <button id="lotteryBtn" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-bold text-lg btn-hover flex items-center">
                <i class="fa fa-play-circle mr-2"></i>
                <span>开始抽奖</span>
            </button>
            
            <!-- 剩余次数 -->
            <div class="mt-4 text-gray-600">
                <i class="fa fa-ticket mr-1"></i> 剩余抽奖次数: <span id="remainingDraws" class="font-semibold text-primary">3</span>
            </div>
        </section>
        
        <!-- 奖品说明 -->
        <section class="bg-white rounded-xl p-6 shadow-md mb-10">
            <h2 class="text-xl font-semibold text-accent mb-4 flex items-center">
                <i class="fa fa-list-alt text-primary mr-2"></i>奖品设置
            </h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <div class="flex items-center p-3 rounded-lg bg-red-50">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-3">1</div>
                    <div>
                        <div class="font-medium">一等奖</div>
                        <div class="text-sm text-gray-500">智能手机一部</div>
                    </div>
                </div>
                <div class="flex items-center p-3 rounded-lg bg-blue-50">
                    <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-3">2</div>
                    <div>
                        <div class="font-medium">二等奖</div>
                        <div class="text-sm text-gray-500">平板电脑一台</div>
                    </div>
                </div>
                <div class="flex items-center p-3 rounded-lg bg-green-50">
                    <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold mr-3">3</div>
                    <div>
                        <div class="font-medium">三等奖</div>
                        <div class="text-sm text-gray-500">无线耳机一副</div>
                    </div>
                </div>
                <div class="flex items-center p-3 rounded-lg bg-pink-50">
                    <div class="w-8 h-8 rounded-full bg-pink-500 flex items-center justify-center text-white font-bold mr-3">4</div>
                    <div>
                        <div class="font-medium">四等奖</div>
                        <div class="text-sm text-gray-500">100元代金券</div>
                    </div>
                </div>
                <div class="flex items-center p-3 rounded-lg bg-orange-50">
                    <div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold mr-3">5</div>
                    <div>
                        <div class="font-medium">五等奖</div>
                        <div class="text-sm text-gray-500">50元代金券</div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 中奖记录 -->
        <section class="bg-white rounded-xl p-6 shadow-md">
            <h2 class="text-xl font-semibold text-accent mb-4 flex items-center">
                <i class="fa fa-history text-primary mr-2"></i>最近中奖记录
            </h2>
            <div id="winnerList" class="space-y-3 max-h-40 overflow-y-auto pr-2">
                <div class="flex justify-between items-center p-2 border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-bold mr-3">张</div>
                        <div>
                            <div>张先生</div>
                            <div class="text-sm text-gray-500">10分钟前</div>
                        </div>
                    </div>
                    <div class="text-primary font-medium">三等奖</div>
                </div>
                <div class="flex justify-between items-center p-2 border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-bold mr-3">李</div>
                        <div>
                            <div>李女士</div>
                            <div class="text-sm text-gray-500">30分钟前</div>
                        </div>
                    </div>
                    <div class="text-blue-500 font-medium">二等奖</div>
                </div>
                <div class="flex justify-between items-center p-2">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-bold mr-3">王</div>
                        <div>
                            <div>王先生</div>
                            <div class="text-sm text-gray-500">1小时前</div>
                        </div>
                    </div>
                    <div class="text-orange-500 font-medium">五等奖</div>
                </div>
            </div>
        </section>
    </div>
    
    <!-- 中奖结果弹窗 -->
    <div id="resultModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
            <div class="text-center">
                <div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6">
                    <i class="fa fa-trophy text-4xl text-primary"></i>
                </div>
                <h3 class="text-2xl font-bold text-accent mb-2">恭喜您！</h3>
                <p class="text-xl text-gray-700 mb-6" id="prizeResult">您获得了一等奖</p>
                <button id="closeModal" class="bg-primary text-white px-6 py-2.5 rounded-lg font-medium btn-hover">
                    确定
                </button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const lotteryBtn = document.getElementById('lotteryBtn');
            const remainingDrawsEl = document.getElementById('remainingDraws');
            const resultModal = document.getElementById('resultModal');
            const modalContent = document.getElementById('modalContent');
            const prizeResult = document.getElementById('prizeResult');
            const closeModal = document.getElementById('closeModal');
            const转盘 = document.querySelector('.border-8');
            
            // 状态变量
            let isSpinning = false;
            let remainingDraws = 3;
            let旋转角度 = 0;
            
            // 奖品设置及概率
            const prizes = [
                { name: '一等奖', degrees: 0, probability: 5 },
                { name: '谢谢参与', degrees: 45, probability: 30 },
                { name: '三等奖', degrees: 90, probability: 15 },
                { name: '二等奖', degrees: 135, probability: 10 },
                { name: '谢谢参与', degrees: 180, probability: 20 },
                { name: '四等奖', degrees: 225, probability: 12 },
                { name: '谢谢参与', degrees: 270, probability: 5 },
                { name: '五等奖', degrees: 315, probability: 3 }
            ];
            
            // 抽奖按钮点击事件
            lotteryBtn.addEventListener('click', function() {
                if (isSpinning) return;
                
                // 检查剩余次数
                if (remainingDraws <= 0) {
                    alert('您的抽奖次数已用完！');
                    return;
                }
                
                // 开始抽奖
                startLottery();
            });
            
            // 关闭弹窗按钮
            closeModal.addEventListener('click', function() {
                resultModal.classList.add('hidden');
                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');
            });
            
            // 开始抽奖函数
            function startLottery() {
                isSpinning = true;
                lotteryBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i><span>抽奖中...</span>';
                lotteryBtn.classList.add('opacity-70', 'cursor-not-allowed');
                lotteryBtn.disabled = true;
                
                // 减少抽奖次数
                remainingDraws--;
                remainingDrawsEl.textContent = remainingDraws;
                
                // 随机选择奖品（根据概率）
                const prize = selectPrizeByProbability();
                
                // 计算旋转角度（多转几圈 + 目标角度）
                const targetDegrees = 1080 + (360 - prize.degrees); // 3圈 + 目标位置
                const duration = 5000; // 旋转持续时间（毫秒）
                
                // 应用旋转动画
                旋转角度 = targetDegrees;
                转盘.style.transition = `transform ${duration}ms cubic-bezier(0.2, 0.8, 0.3, 1)`;
                转盘.style.transform = `rotate(${targetDegrees}deg)`;
                
                // 动画结束后显示结果
                setTimeout(() => {
                    showResult(prize.name);
                    isSpinning = false;
                    lotteryBtn.innerHTML = '<i class="fa fa-play-circle mr-2"></i><span>开始抽奖</span>';
                    lotteryBtn.classList.remove('opacity-70', 'cursor-not-allowed');
                    lotteryBtn.disabled = false;
                }, duration);
            }
            
            // 根据概率选择奖品
            function selectPrizeByProbability() {
                const totalProbability = prizes.reduce((sum, prize) => sum + prize.probability, 0);
                const random = Math.random() * totalProbability;
                
                let cumulativeProbability = 0;
                for (const prize of prizes) {
                    cumulativeProbability += prize.probability;
                    if (random < cumulativeProbability) {
                        return prize;
                    }
                }
                
                return prizes[0]; // 默认返回第一个
            }
            
            // 显示抽奖结果
            function showResult(prizeName) {
                prizeResult.textContent = `您获得了${prizeName}`;
                
                // 显示弹窗并添加动画
                resultModal.classList.remove('hidden');
                setTimeout(() => {
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                }, 10);
                
                // 如果中奖，添加到中奖记录
                if (!prizeName.includes('谢谢参与')) {
                    addToWinnerList(prizeName);
                }
            }
            
            // 添加到中奖记录
            function addToWinnerList(prizeName) {
                const winnerList = document.getElementById('winnerList');
                const now = new Date();
                const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
                
                // 随机生成一个姓氏
                const lastNames = ['张', '王', '李', '赵', '刘', '陈', '杨', '黄', '周', '吴'];
                const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
                
                // 创建新记录元素
                const newRecord = document.createElement('div');
                newRecord.className = 'flex justify-between items-center p-2 border-b border-gray-100 opacity-0 transform translate-y-2';
                newRecord.innerHTML = `
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-bold mr-3">${randomLastName}</div>
                        <div>
                            <div>${randomLastName}${Math.random() > 0.5 ? '先生' : '女士'}</div>
                            <div class="text-sm text-gray-500">刚刚</div>
                        </div>
                    </div>
                    <div class="font-medium ${getPrizeColor(prizeName)}">${prizeName}</div>
                `;
                
                // 添加到列表顶部
                winnerList.insertBefore(newRecord, winnerList.firstChild);
                
                // 添加显示动画
                setTimeout(() => {
                    newRecord.classList.remove('opacity-0', 'translate-y-2');
                    newRecord.classList.add('transition-all', 'duration-500', 'opacity-100', 'translate-y-0');
                }, 10);
                
                // 限制列表长度
                if (winnerList.children.length > 10) {
                    winnerList.removeChild(winnerList.lastChild);
                }
            }
            
            // 根据奖项获取颜色类
            function getPrizeColor(prizeName) {
                if (prizeName.includes('一等奖')) return 'text-primary';
                if (prizeName.includes('二等奖')) return 'text-blue-500';
                if (prizeName.includes('三等奖')) return 'text-green-500';
                if (prizeName.includes('四等奖')) return 'text-pink-500';
                if (prizeName.includes('五等奖')) return 'text-orange-500';
                return 'text-gray-500';
            }
        });
    </script>
</body>
</html>
    